<template>
	<div>
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>贷款超市管理</el-breadcrumb-item>
			<el-breadcrumb-item>平台分类</el-breadcrumb-item>
		</el-breadcrumb>
		
		<el-card>
			<el-button type="primary" @click="addDialog">新增</el-button>
			
			<el-table :data="loanMarketTypeList" border stripe>
			  <el-table-column label="序号" prop="id"></el-table-column>
			  <el-table-column label="类型编码" prop="code"></el-table-column>
			  <el-table-column label="类型名称" prop="value"></el-table-column>
			  <el-table-column label="操作">
				  <!-- 作用于插槽 -->
				  <template slot-scope="scope">
				    <!-- {{scope.row}} -->
				    <el-button @click="showEditDialog(scope.row.id)" size="mini" type="primary" icon="el-icon-edit"></el-button>
				  </template>
			  </el-table-column>
			</el-table>
			
			<!-- 分页 -->
			<el-pagination
			  @size-change="handleSizeChange"
			  @current-change="handleCurrentChange"
			  :current-page="pageCount"
			  :page-size="pageSize"
			  layout="total, sizes, prev, pager, next, jumper"
			  :total="total">
			</el-pagination>
			
			<!-- 新增 -->
			<el-dialog
			  title="新增"
			  :visible.sync="addDialogVisible"
			  width="60%"
			  @close="addClosed">
				<el-form ref="addFormRef" :model="addForm" label-width="80px">
					<el-form-item label="类型编码">
						<el-input v-model="addForm.code"></el-input>
					</el-form-item>
					<el-form-item label="类型名称">
						<el-input  v-model="addForm.value"></el-input>
					</el-form-item>
					<el-form-item label="排序">
						<el-input v-model="addForm.sort" placeholder="输入排序"></el-input>
					</el-form-item>
				</el-form>
			  <span slot="footer" class="dialog-footer">
			    <el-button @click="addDialogVisible = false">取 消</el-button>
			    <el-button type="primary" @click="addInfo">确 定</el-button>
			  </span>
			</el-dialog>
			
			<!-- 修改用户数据 -->
			<el-dialog
			  title="修改用户"
			  :visible.sync="editDialogVisible"
			  width="60%"
			  @close="editClosed"
			  >
				<!-- 主体区域 -->
				<el-form ref="editFormRef" :model="editForm" label-width="80px">
					<el-form-item label="类型编码">
						<el-input v-model="editForm.code"></el-input>
					</el-form-item>
					<el-form-item label="类型名称">
						<el-input  v-model="editForm.value"></el-input>
					</el-form-item>
					<el-form-item label="排序">
						<el-input v-model="editForm.sort" placeholder="输入排序"></el-input>
					</el-form-item>
				</el-form>
				<!-- 底部区域 -->
				<span slot="footer" class="dialog-footer">
					<el-button @click="editDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="editInfo">确 定</el-button>
				</span>
			</el-dialog>
			
		</el-card>
		
	</div>
</template>

<script>
	export default{
		data(){
			return{
				pageCount:1,
				pageSize:20,
				total:0,
				loanMarketTypeList:[],
				editDialogVisible:false,
				addDialogVisible:false,
				addForm:{
					msgTitle:'',
					msgContent:'',
					isClosed:0
				},
				editForm:{}
			}
		},
		created() {
			this.getLoanMarketTypeList()
		},
		methods:{
			async getLoanMarketTypeList(){
				const {data:res} = await this.$http.post('/loanMarketType/list',{ pageCount:this.pageCount,pageSize:this.pageSize })
				// console.log(res);
				this.loanMarketTypeList = res.data
				this.total = res.data.length
			},
			// 监听pagesize改变的事件
			handleSizeChange(val){
			   // console.log(`每页 ${val} 条`);
			  this.pageSize = val
			  this.getNoticeList()
			},
			// 监听页码值改变的事件
			handleCurrentChange(val){
			  // console.log(`当前页: ${val}`);
			  this.pageCount = val
			  this.getNoticeList()
			},
			// 打开新增弹窗
			addDialog(){
				this.addDialogVisible = true
			},
			// 新增信息
			async addInfo(){
				const {data:res} = await this.$http.post('/loanMarketType/save',{
					code:this.addForm.code,
					value:this.addForm.value,
					sort: this.addForm.sort
				})
				if(res.code!==200){
					return this.$message.error('新增失败')
				}
				this.$message.success('新增成功')
				this.getLoanMarketTypeList()
				this.addDialogVisible = false
			},
			addClosed(){
				this.$refs.addFormRef.resetFields()
			},
			// 获取修改数据
			async showEditDialog(id){
			  this.editDialogVisible = true
			  // console.log(id);
			  const {data:res} = await this.$http.post('/loanMarketType/getById',{id:id})
			  // console.log(res);
			  this.editForm = res.data
			},
			editClosed(){
				// this.$refs.editFormRef.resetFields()
			},
			// 修改数据
			async editInfo(){
				const {data:res} = await this.$http.post('/loanMarketType/update',{
					id:this.editForm.id,
					code:this.editForm.code,
					value:this.editForm.value,
					sort: this.editForm.sort
				})
				if(res.code!==200){
					return this.$message.error('修改失败')
				}
				this.$message.success('修改成功')
				this.editDialogVisible = false
				this.getLoanMarketTypeList()
			}
		}
	}
</script>

<style lang="less" scoped>
	
	
</style>
